<template>
  <div class='container'>
    <el-form :inline="true">
      <el-form-item label="目录名称">
        <el-input v-model="page.keyword"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="page.state">
          <el-option label="启用" value="启用"></el-option>
          <el-option label="禁用" value="禁用"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetForm" size="small">清除</el-button>
        <el-button type="primary" @click="research" size="small">搜索</el-button>

      </el-form-item>
      <el-button type="success" class="filter-item fr" size="small" style="margin: 15px，6px" icon="el-icon-edit" @click=" directorysAdd ">新增目录</el-button>
    </el-form>
    <directorys-add v-if="showDialog" :show-dialog.sync="showDialog" @closeBtn="showDialog = $event" @adds="details"
    :subjectID.sync="subjectID"
    />
    <el-row>
      <el-alert type="info" show-icon :closable="false" :title="`数据一共 ${ page.total } 条`" style="margin-bottom: 15px"/>
    </el-row>
    <!-- 放置表格和分页 -->
    <el-card>
      <el-table :data="list">
        <el-table-column label="序号" type="index"/>
        <el-table-column label="所属学科" prop="subjectName"/>
        <el-table-column label="目录名称" prop="directoryName"/>
        <el-table-column label="创建者" prop="username"/>
        <el-table-column label="创建日期" prop="addDate" width="180px">
          <template v-slot="{ row }">
            {{ row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column label="面试题数量" prop="totals"/>
        <el-table-column label="状态" prop="state">
          <template v-slot="{ row }">
            {{ row.state ? "已启用" : "已禁用" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180px">
          <template v-slot="{ row, $index }">
            <el-button type="text" @click="changeState(row.id,row.state,$index)">{{ row.state ? '禁用' : '启用'}}</el-button>
            <el-button type="text" :disabled="row.state === 1" @click="updateMoon(row.id)">修改</el-button>
            <el-button type="text" :disabled="row.state === 1" @click="removeMoon(row.id,$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-row type="flex" justify="end">
        <el-pagination @current-change="changePage" background layout="prev, pager,next,sizes,jumper" :total="page.total"></el-pagination>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import DirectorysAdd from '@/module-hmmm/components/directorys-add'
import { list, changeState, remove } from '@/api/hmmm/directorys'
export default {
  components: {
    DirectorysAdd
  },
  data () {
    return {
      page: {
        page: 1, // 当前页码
        pagesize: 10,
        directoryName: '',
        total: 0,
        state: null,
        keyword: ''
      },
      showDialog: false,
      state: null,
      list: [],
      id: null,
      subjectID: null,
      directoryName: ''
    }
  },
  created () {
    this.details()
  },
  methods: {
    directorysAdd () {
      this.showDialog = true
    },
    changePage (newPage) {
      this.page.page = newPage
      this.details()
    },
    updateMoon (row) {
      this.subjectID = row
      // const { data } = await detail({ id: row })
      // this.subjectID = data.subjectID
      // this.directoryName = data.directoryName
      // this.detail = data.items
      // console.log(data)
      this.showDialog = true
    },
    async details () {
      console.log(this.page)
      const { data } = await list(this.page)
      console.log(data)
      console.log(data.items)
      this.list = data.items
      this.page.total = data.counts
      // this.subjectID = data.items.subjectID
      // this.directoryName = data.items.directoryName

      // this.list = rows
      // this.loading = false
    },
    async changeState (id, state, index) {
      try {
        await changeState({ id, state: state ? 0 : 1 })
        this.list[index].state = state ? 0 : 1
        this.$message.success('操作成功')
      } catch (err) {
        console.log(err)
        this.$message.error('操作失败，请重试')
      }
    },
    async removeMoon (id, index) {
      try {
        await this.$confirm('此操作将永久删除该目录，是否继续?', '提示', {
          type: 'warning',
          cancelButton: '取消',
          beokButtonText: '确定'
        })
        await remove({ id })
        this.list.splice(index, 1)
        this.$message.success('删除成功')
      } catch (err) {
        console.log(err)
        this.$message.error('操作失败，请重试')
      }
    },
    resetForm () {
      this.page.keyword = ''
      this.page.state = null
      this.state = null
    },
    research () {
      if (this.state === '启用') {
        this.page.state = 1
      } else if (this.state === '禁用') {
        this.page.state = 0
      }
      this.details()
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  background: #fff;
  padding : 10px
}
</style>
